<template>
  <div class="creation-detail">
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-state">
      <div class="loading-content">
        <el-loading-spinner size="60"></el-loading-spinner>
        <p>正在加载作品详情...</p>
      </div>
    </div>

    <!-- 错误状态 -->
    <div v-if="error" class="error-state">
      <div class="error-content">
        <el-empty description="获取作品详情失败，请稍后重试">
          <el-button type="primary" @click="fetchWorkDetail">重新加载</el-button>
        </el-empty>
      </div>
    </div>

    <!-- 作品内容 -->
    <div v-if="workDetail && !loading && !error" class="work-content">
      <!-- 顶部导航 -->
      <div class="top-nav">
        <el-button class="back-button" @click="handleExit">
          <el-icon size="16"><ArrowLeft /></el-icon>
          返回作品广场
        </el-button>
      </div>

      <!-- 作品标题区域 -->
      <div class="title-section">
        <div class="title-container">
          <h1 class="title">{{ workDetail.sTitle }}</h1>
          <div class="title-actions">
            <el-button
                class="share-button"
                type="default"
                size="small"
                @click="handleShare"
            >
              <el-icon size="16"><Share /></el-icon>
              分享
            </el-button>
          </div>
        </div>

        <div class="work-meta-header">
          <div class="author-info">
            <el-avatar :size="40" :src="getAvatarUrl(workDetail.uAvatar)" class="author-avatar" />
            <div class="author-details">
              <span class="author-name">{{ workDetail.sUserNickName }}</span>
              <span class="publish-date">{{ formatDate(workDetail.sCreateTime) }}</span>
            </div>
          </div>

          <div class="action-buttons">
            <!-- 关注按钮 -->
            <el-button
                class="follow-button"
                :type="isFollowing ? 'default' : 'primary'"
                size="small"
                @click="toggleFollow"
                :loading="isFollowingLoading"
                :disabled="isFollowingLoading"
            >
              <el-icon size="14">
                <User v-if="!isFollowing" />
                <UserFilled v-if="isFollowing" />
              </el-icon>
              {{ isFollowing ? '已关注' : '关注作者' }}
            </el-button>

            <!-- 点赞按钮 -->
            <el-button
                class="like-button"
                :type="isLiked ? 'danger' : 'default'"
                size="small"
                @click="toggleLike"
                :loading="isLiking"
                :disabled="isLiking"
            >
              <el-icon size="14">
                <Like v-if="!isLiked" />
                <LikeFilled v-if="isLiked" />
              </el-icon>
              {{ isLiked ? '已点赞' : '点赞' }}
              <span class="like-count" :class="{ 'liked': isLiked }">{{ workDetail.sLiked || 0 }}</span>
            </el-button>
          </div>
        </div>
      </div>

      <!-- 作品封面 -->
      <div class="cover-section">
        <div class="cover-container">
          <img
              :src="getCoverUrl(workDetail.sCoverImg)"
              :alt="workDetail.sTitle"
              class="work-cover"
              @click="workDetail.sImg && workDetail.sImg.length > 0 ? openLightbox(0) : null"
              :class="{ 'clickable': workDetail.sImg && workDetail.sImg.length > 0 }"
          >
          <div class="cover-overlay" v-if="workDetail.sImg && workDetail.sImg.length > 0">
            <el-icon size="24" class="zoom-icon"><ZoomIn /></el-icon>
            <span>点击查看大图</span>
          </div>
        </div>
      </div>

      <!-- 作品信息卡片 -->
      <div class="info-cards">
        <el-card class="info-card stats-card">
          <div class="card-content">
            <div class="stat-item">
              <el-icon size="20" class="stat-icon"><View /></el-icon>
              <div class="stat-info">
                <span class="stat-number">{{ workDetail.sClick }}</span>
                <span class="stat-label">浏览量</span>
              </div>
            </div>
            <div class="stat-item">
              <el-icon size="20" class="stat-icon"><Star /></el-icon>
              <div class="stat-info">
                <span class="stat-number">{{ workDetail.sCollect || 0 }}</span>
                <span class="stat-label">收藏数</span>
              </div>
            </div>
            <div class="stat-item">
              <el-icon size="20" class="stat-icon"><Pointer /></el-icon>
              <div class="stat-info">
                <span class="stat-number">{{ workDetail.sLiked || 0 }}</span>
                <span class="stat-label">点赞数</span>
              </div>
            </div>
          </div>
        </el-card>

        <el-card class="info-card category-card">
          <div class="card-content">
            <h4 class="card-title">作品信息</h4>
            <div class="category-info">
              <el-tag type="primary" class="category-tag">
                {{ workDetail.sCgyName }}
              </el-tag>
              <span class="category-desc">作品分类</span>
            </div>
            <div class="keywords" v-if="workDetail.sKeyword && workDetail.sKeyword.split(',').filter(k => k).length > 0">
              <h5>关键词</h5>
              <div class="keyword-tags">
                <el-tag
                    v-for="keyword in workDetail.sKeyword.split(',').filter(k => k)"
                    :key="keyword"
                    size="small"
                    class="keyword-tag"
                >
                  {{ keyword }}
                </el-tag>
              </div>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 内容区域 -->
      <div class="content-section">
        <el-card class="content-card">
          <template #header>
            <div class="card-header">
              <h3 class="content-title">作品内容</h3>
            </div>
          </template>

          <div class="text-content">
            <div
                v-for="(paragraph, index) in paragraphs"
                :key="'p-'+index"
                class="text-paragraph"
                v-html=renderSimpleMarkdown(paragraph)
            >
            </div>
          </div>

          <!-- 图片画廊 -->
          <div v-if="workDetail.sImg && workDetail.sImg.length > 0" class="image-gallery">
            <div class="gallery-header">
              <h3 class="gallery-title">作品图片</h3>
              <span class="gallery-count">共 {{ workDetail.sImg.length }} 张</span>
            </div>
            <div class="gallery-container">
              <div
                  v-for="(image, index) in workDetail.sImg"
                  :key="'img-'+index"
                  class="gallery-item"
                  @click="openLightbox(index)"
              >
                <img
                    :src="getImageUrl(image)"
                    :alt="`${workDetail.sTitle}的图片 ${index + 1}`"
                    class="gallery-image"
                >
                <div class="image-overlay">
                  <el-icon size="24"><ZoomIn /></el-icon>
                  <span>查看大图</span>
                </div>
                <div class="image-index">{{ index + 1 }}</div>
              </div>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 相关作品推荐 -->
      <div class="recommendation-section" v-if="false">
        <el-card class="recommendation-card">
          <template #header>
            <div class="card-header">
              <h3 class="recommendation-title">相关作品推荐</h3>
            </div>
          </template>
          <div class="recommendation-list">
            <!-- 这里可以添加相关作品推荐 -->
            <div class="recommendation-placeholder">
              <p>更多精彩作品正在路上...</p>
            </div>
          </div>
        </el-card>
      </div>

      <!-- 图片灯箱 -->
      <div v-if="showLightbox" class="lightbox" @click="closeLightbox">
        <div class="lightbox-content" @click.stop>
          <button class="lightbox-close" @click="closeLightbox">
            <el-icon size="24"><Close /></el-icon>
          </button>
          <button class="lightbox-nav lightbox-prev" @click.stop="prevImage">
            <el-icon size="24"><ArrowLeft /></el-icon>
          </button>
          <div class="lightbox-image-container">
            <img
                :src="getImageUrl(workDetail.sImg[currentImageIndex])"
                class="lightbox-image"
                :alt="`${workDetail.sTitle}的图片 ${currentImageIndex + 1}`"
            >
          </div>
          <button class="lightbox-nav lightbox-next" @click.stop="nextImage">
            <el-icon size="24"><ArrowRight /></el-icon>
          </button>
          <div class="lightbox-footer">
            <div class="lightbox-counter">
              {{ currentImageIndex + 1 }} / {{ workDetail.sImg.length }}
            </div>
            <div class="lightbox-actions">
              <el-button size="small" @click="downloadImage">
                <el-icon size="14"><Download /></el-icon>
                下载
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {computed, onMounted, ref, watch} from 'vue';
import {ElAvatar, ElButton, ElCard, ElEmpty, ElIcon, ElLoading, ElTag} from 'element-plus';
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
import axios from '../api/index.js';
import {useRouter} from 'vue-router';
import {renderSimpleMarkdown} from '../Renderer.js';

export default {
  name: 'CreationDetail',
  methods: {
    renderSimpleMarkdown(content) {
      return renderSimpleMarkdown(content)
    }
  },
  components: {
    ElIcon,
    ElLoading,
    ElEmpty,
    ElTag,
    ElCard,
    ElButton,
    ElAvatar,
    Eye: ElementPlusIconsVue.Eye,
    Like: ElementPlusIconsVue.Like,
    LikeFilled: ElementPlusIconsVue.LikeFilled,
    ZoomIn: ElementPlusIconsVue.ZoomIn,
    Close: ElementPlusIconsVue.Close,
    ArrowLeft: ElementPlusIconsVue.ArrowLeft,
    ArrowRight: ElementPlusIconsVue.ArrowRight,
    User: ElementPlusIconsVue.User,
    UserFilled: ElementPlusIconsVue.UserFilled,
    Share: ElementPlusIconsVue.Share,
    Download: ElementPlusIconsVue.Download,
    View: ElementPlusIconsVue.View,
    Star: ElementPlusIconsVue.Star,
    Pointer: ElementPlusIconsVue.Pointer,
  },
  props: {
    sId: {
      type: Number,
      required: true
    }
  },
  setup(props) {
    const router = useRouter();
    const workDetail = ref(null);
    const loading = ref(true);
    const error = ref(false);
    const showLightbox = ref(false);
    const currentImageIndex = ref(0);
    const isLiked = ref(false);
    const isLiking = ref(false);
    const isFollowing = ref(false);
    const isFollowingLoading = ref(false);

    const handleExit = () => {
      router.go(-1);
    };

    const handleShare = () => {
      // 分享功能实现
      if (navigator.share) {
        navigator.share({
          title: workDetail.value.sTitle,
          text: workDetail.value.sDescription || '看看这个精彩的作品',
          url: window.location.href,
        })
            .catch((error) => console.log('分享失败', error));
      } else {
        // 降级处理：复制链接
        navigator.clipboard.writeText(window.location.href)
            .then(() => {
              // 可以添加提示消息
              console.log('链接已复制到剪贴板');
            })
            .catch(err => {
              console.error('复制失败:', err);
            });
      }
    };

    const downloadImage = () => {
      if (!workDetail.value.sImg || !workDetail.value.sImg[currentImageIndex.value]) return;

      const imageUrl = getImageUrl(workDetail.value.sImg[currentImageIndex.value]);
      const link = document.createElement('a');
      link.href = imageUrl;
      link.download = `${workDetail.value.sTitle}_${currentImageIndex.value + 1}.jpg`;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    };

    const fetchFollowStatus = async () => {
      if (!workDetail.value.uId) {
        console.log('无法查询到作者id');
        return;
      }
      try {
        isFollowing.value = await axios.get(`/follow/or/not/${workDetail.value.uId}`);
      } catch (err) {
        console.error('查询关注状态失败:', err);
      }
    };

    const toggleFollow = async () => {
      if (isFollowingLoading.value || !workDetail.value.uId) return;

      try {
        isFollowingLoading.value = true;
        await axios.put(`/follow/${workDetail.value.uId}/${!isFollowing.value}`);
        isFollowing.value = !isFollowing.value;
      } catch (err) {
        console.error('关注/取关操作失败:', err);
      } finally {
        isFollowingLoading.value = false;
      }
    };

    const fetchWorkDetail = async () => {
      try {
        loading.value = true;
        error.value = false;

        const response = await axios.get('/creation/details', {
          params: {
            id: props.sId
          }
        });

        if (response && response.isLiked !== undefined) {
          isLiked.value = response.isLiked;
        }
        workDetail.value = response;
      } catch (err) {
        console.error('获取作品详情失败:', err);
        error.value = true;
      } finally {
        loading.value = false;
      }
    };

    const toggleLike = async () => {
      if (isLiking.value) return;
      try {
        isLiking.value = true;
        const response = await axios.put(('/creation/like/' + props.sId));

        if (response && response.liked !== undefined) {
          isLiked.value = response.liked;
          if (workDetail.value) {
            workDetail.value.sLiked = response.likeCount || 0;
          }
        } else {
          isLiked.value = !isLiked.value;
          await fetchWorkDetail();
        }
      } catch (err) {
        console.error('点赞操作失败:', err);
        isLiked.value = !isLiked.value;
      } finally {
        isLiking.value = false;
      }
    };

    const formatDate = (dateString) => {
      if (!dateString) return '';
      const date = new Date(dateString);
      const now = new Date();
      const diffTime = Math.abs(now - date);
      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));

      if (diffDays === 1) {
        return '昨天 ' + date.toLocaleTimeString('zh-CN', {hour: '2-digit', minute: '2-digit'});
      } else if (diffDays < 7) {
        return `${diffDays}天前`;
      } else {
        return date.toLocaleDateString('zh-CN') + ' ' + date.toLocaleTimeString('zh-CN', {
          hour: '2-digit',
          minute: '2-digit'
        });
      }
    };

    const getCoverUrl = (coverImg) => {
      if (!coverImg) {
        return 'https://images.unsplash.com/photo-1518837695005-2083093ee35b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80';
      }
      return getImageUrl(coverImg);
    };

    const getImageUrl = (imgName) => {
      if (!imgName) return '';
      const baseURL = axios.defaults.baseURL || '';
      const cleanBaseURL = baseURL.endsWith('/') ? baseURL.slice(0, -1) : baseURL;
      return `${cleanBaseURL}/img/${imgName}`;
    };

    const getAvatarUrl = (avatarName) => {
      if (!avatarName) {
        return 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png';
      }

      const baseURL = axios.defaults.baseURL || '';
      const cleanBaseURL = baseURL.endsWith('/') ? baseURL.slice(0, -1) : baseURL;
      return `${cleanBaseURL}/img/avatar/${avatarName}`;
    };

    const paragraphs = computed(() => {
      if (!workDetail.value || !workDetail.value.sContent) return [];
      return workDetail.value.sContent.split('\n').filter(p => p.trim());
    });

    const openLightbox = (index) => {
      currentImageIndex.value = index;
      showLightbox.value = true;
      document.body.style.overflow = 'hidden';
    };

    const closeLightbox = () => {
      showLightbox.value = false;
      document.body.style.overflow = '';
    };

    const nextImage = () => {
      if (currentImageIndex.value < workDetail.value.sImg.length - 1) {
        currentImageIndex.value++;
      } else {
        currentImageIndex.value = 0;
      }
    };

    const prevImage = () => {
      if (currentImageIndex.value > 0) {
        currentImageIndex.value--;
      } else {
        currentImageIndex.value = workDetail.value.sImg.length - 1;
      }
    };

    const handleKeydown = (e) => {
      if (!showLightbox.value) return;

      if (e.key === 'Escape') {
        closeLightbox();
      } else if (e.key === 'ArrowRight') {
        nextImage();
      } else if (e.key === 'ArrowLeft') {
        prevImage();
      }
    };

    onMounted(() => {
      fetchWorkDetail();
      window.addEventListener('keydown', handleKeydown);
    });

    watch(workDetail, (newVal) => {
      if (newVal?.uId) {
        fetchFollowStatus();
      }
    });

    return {
      workDetail,
      loading,
      error,
      formatDate,
      getCoverUrl,
      getImageUrl,
      getAvatarUrl,
      paragraphs,
      showLightbox,
      currentImageIndex,
      openLightbox,
      closeLightbox,
      nextImage,
      prevImage,
      isLiked,
      isLiking,
      toggleLike,
      handleExit,
      isFollowing,
      isFollowingLoading,
      toggleFollow,
      handleShare,
      downloadImage,
      fetchWorkDetail
    };
  }
};
</script>

<style scoped>
.creation-detail {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;
  padding: 0;
}

/* 顶部导航 */
.top-nav {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  padding: 16px 0;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.back-button {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: block;
}

/* 主要内容区域 */
.work-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 40px;
}

/* 标题区域 */
.title-section {
  background: white;
  border-radius: 16px;
  padding: 32px;
  margin: 24px 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.title-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

.title {
  font-size: 2.2rem;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.3;
  margin: 0;
  flex: 1;
  margin-right: 20px;
}

.title-actions {
  flex-shrink: 0;
}

.share-button {
  border: 1px solid #e0e0e0;
  background: white;
}

.work-meta-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20px;
  border-top: 1px solid #f0f0f0;
}

.author-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.author-avatar {
  border: 2px solid #f0f0f0;
}

.author-details {
  display: flex;
  flex-direction: column;
}

.author-name {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
}

.publish-date {
  font-size: 0.9rem;
  color: #666;
  margin-top: 4px;
}

.action-buttons {
  display: flex;
  gap: 12px;
}

.follow-button, .like-button {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

.like-count {
  margin-left: 4px;
  font-weight: 600;
}

.like-count.liked {
  color: #f56c6c;
}

/* 封面区域 */
.cover-section {
  margin: 24px 0;
}

.cover-container {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  cursor: pointer;
}

.work-cover {
  width: 100%;
  height: 400px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.work-cover.clickable:hover {
  transform: scale(1.02);
}

.cover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cover-container:hover .cover-overlay {
  opacity: 1;
}

.zoom-icon {
  margin-bottom: 8px;
}

/* 信息卡片 */
.info-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 24px 0;
}

.info-card {
  border-radius: 12px;
  border: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.stats-card .card-content {
  display: flex;
  justify-content: space-around;
  padding: 20px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.stat-icon {
  color: #409eff;
  background: #ecf5ff;
  padding: 8px;
  border-radius: 8px;
}

.stat-info {
  display: flex;
  flex-direction: column;
}

.stat-number {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1a1a1a;
}

.stat-label {
  font-size: 0.9rem;
  color: #666;
  margin-top: 4px;
}

.category-card .card-content {
  padding: 20px;
}

.card-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 16px;
  color: #333;
}

.category-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.category-tag {
  font-size: 0.9rem;
  padding: 6px 12px;
}

.category-desc {
  font-size: 0.9rem;
  color: #666;
}

.keywords h5 {
  margin: 0 0 12px 0;
  font-size: 1rem;
  color: #333;
}

.keyword-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.keyword-tag {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  color: #495057;
}

/* 内容区域 */
.content-section {
  margin: 24px 0;
}

.content-card {
  border-radius: 16px;
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.card-header {
  padding: 0;
}

.content-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.text-content {
  padding: 8px 0;
}

.text-paragraph {
  font-size: 1.05rem;
  line-height: 1.8;
  color: #2c3e50;
  margin-bottom: 1.2em;
  text-align: justify;
}

/* 图片画廊 */
.image-gallery {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid #f0f0f0;
}

.gallery-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.gallery-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.gallery-count {
  color: #666;
  font-size: 0.9rem;
}

.gallery-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.gallery-item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
  aspect-ratio: 4/3;
}

.gallery-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.gallery-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gallery-item:hover .image-overlay {
  opacity: 1;
}

.image-overlay .el-icon {
  margin-bottom: 8px;
}

.image-index {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 500;
}

/* 推荐区域 */
.recommendation-section {
  margin: 24px 0;
}

.recommendation-card {
  border-radius: 16px;
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.recommendation-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.recommendation-placeholder {
  padding: 40px;
  text-align: center;
  color: #666;
}

/* 灯箱样式 */
.lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.lightbox-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  backdrop-filter: blur(10px);
  transition: background 0.3s ease;
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  backdrop-filter: blur(10px);
  transition: background 0.3s ease;
}

.lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.2);
}

.lightbox-prev {
  left: 20px;
}

.lightbox-next {
  right: 20px;
}

.lightbox-image-container {
  max-width: 100%;
  max-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-image {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 8px;
}

.lightbox-footer {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  color: white;
}

.lightbox-counter {
  background: rgba(0, 0, 0, 0.5);
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 0.9rem;
}

.lightbox-actions {
  display: flex;
  gap: 10px;
}

/* 加载和错误状态 */
.loading-state, .error-state {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-content, .error-content {
  text-align: center;
}

.loading-content p {
  margin-top: 16px;
  color: #666;
  font-size: 1.1rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .work-content {
    padding: 0 15px 30px;
  }

  .title {
    font-size: 1.8rem;
  }

  .title-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .work-meta-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .action-buttons {
    width: 100%;
    justify-content: space-between;
  }

  .info-cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .stats-card .card-content {
    justify-content: space-between;
  }

  .gallery-container {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
  }

  .work-cover {
    height: 250px;
  }

  .lightbox-nav {
    width: 40px;
    height: 40px;
  }

  .lightbox-prev {
    left: 10px;
  }

  .lightbox-next {
    right: 10px;
  }
}

@media (max-width: 480px) {
  .title {
    font-size: 1.5rem;
  }

  .gallery-container {
    grid-template-columns: 1fr;
  }

  .action-buttons {
    flex-direction: column;
    gap: 10px;
  }

  .follow-button, .like-button {
    width: 100%;
    justify-content: center;
  }
}
</style>